﻿<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<title>samhoo google map test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="/stylesheets/style.css" />
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
    <link type="text/css" rel="stylesheet" href="/stylesheets/map_sam_1.css" />
    <link type="text/css" rel="stylesheet" href="/stylesheets/map_sam.css" />

	<script src="/scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="/scripts/jquery.ui.all.min.1.6rc2.js" type="text/javascript"></script>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZVqzh-MToNV6N_VT1i5ghxT99gQaUbOOP6WxfuptxzAcRSx7RBTRee_EgvOHNfpWI4H3we_QKJ7sWA" type="text/javascript"></script>
	<script type="text/javascript">
	    function loadmap() {
	      if (GBrowserIsCompatible()) {
	        var map = new GMap2(document.getElementById("map"));
	        map.setCenter(new GLatLng(39.917, 116.397), 14);
			map.addControl(new GSmallMapControl());
			return map;
	      }
	    }

		function addr_prepare(map, addr, str, lat, lng, option) {
			var latlng = new GLatLng(lat, lng);
			map.addOverlay(new GMarker(latlng, option));
			addr.click(function(){
				map.setCenter(latlng, 14);
				$.post('map', {'tag':str}, function(data){
					$("#thumb1").html(data).hide().fadeIn();
				});
				return false;
			});
			addr.ajaxStart(function(){
//				map.setCenter(new GLatLng(lat, lng), 14);
				$("#thumb_loading").fadeIn();
			}).ajaxStop(function(){
				$("#thumb_loading").fadeOut();
			});
		}

		$(document).ready(function(){
			var map = loadmap();
			var blueIcon = new GIcon(G_DEFAULT_ICON);
			blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
			markerOptions = { icon:blueIcon };
			$("#thumb_loading").hide();
			addr_prepare(map, $("#gugong"), 'gugong', 39.917, 116.397, markerOptions);
			addr_prepare(map, $("#xihu"), 'xihu', 30.253, 120.147, markerOptions);
			addr_prepare(map, $("#hang1"), 'aolanduo', 30.168022202922,120.231542587280003, markerOptions);
			addr_prepare(map, $("#hang2"), 'suxiaoxiao', 30.25414161921307,120.1336419582367, markerOptions);
			addr_prepare(map, $("#hang3"), 'leifengxizhao', 30.235609387781,120.150078535079999, markerOptions);
			addr_prepare(map, $("#hang4"), 'huanglongtiyuzhongxin', 30.268407989759,120.128717422489999, markerOptions);
		});
    </script>
  </head>
  <body>
	<div id="head"></div>
	<div id="map_container">
		<div id="map"></div>
	</div>
	<div id="info_container">
		<div id="info_left">
			<div id="flickr">
				<img src="static/flickr_small.png" alt="flickr"/>
				<img id="thumb_loading" src="static/40.gif" alt="loading"/>
			</div>
			<div id="thumb1"></div>
		</div>
		<div id="info_right">
			<ol id="addr_container" class='tag-cloud'>
				<li><a id="gugong" class="somewhat-popular" href="">故宫</a></li>
				<li><a id="xihu" class="not-popular" href="">西湖</a></li>
				<li><a id="hang1" class="ultra-popular" href="">奥兰多小镇</a></li>
				<li><a id="hang2" class="not-very-popular" href="">苏小小墓</a></li>
				<li><a id="hang3" class="somewhat-popular" href="">雷峰夕照</a></li>
				<li><a id="hang4" class="not-very-popular" href="">杭州黄龙体育中心</a></li>
			</div>
		</div>
	</div>
	<div id="foot"></div>
  </body>
</html>